<template>
    <div class="about">
        <div class="header">
            <h1 id="know">宠物信息</h1>
            <div id="search">
                <input class="user-input" type="text" name="search" placeholder="请输入内容" v-model="input"
                    @change="search">
                <input class="user-btn" type="button" value="搜索">
            </div>
        </div>

        <div class="content">

            <!-- 遍历标题 -->
            <div v-for="item in info" :key="item.Xid" class="title">
                <router-link :to="{name:'Aboutmore',params: {id: item.Xid}}" class="more"><div class="literal">{{item.Intitle}}</div></router-link>
                <!-- <button class="btn">
                    <router-link :to="{name:'Aboutmore',params: {id: item.Xid}}" class="more">more......</router-link>
                </button> -->
            </div>

        </div>
    </div>
</template>

<script>
    import axios from "axios"
    export default {
        data() {
            return {
                input: '',
                index: 0,
                info: []
            }
        },
        mounted() {
            var _this = this;
            axios.get("http://localhost:3000/api/petAbout")
                .then(res => {
                    console.log("获取数据成功");
                    console.log(res);
                    _this.info = res.data;
                    console.log(_this.info)

                })
                .catch(err => {
                    console.log('获取数据失败' + err);
                })

        },

        methods: {
            search() {
                let _this = this;
                if (_this.input == '') {
                    console.log('搜索空字符');
                    _this.$router.go(0);
                }
                else {

                    console.log('搜索' + _this.input);
                    let a = _this.info.filter(v => {
                        return JSON.stringify(v.Intitle).indexOf(_this.input) !== -1;
                    });
                    console.log(a);
                    _this.info = a;
                    if(a==''){
                        _this.$router.push('/Notfound');
                    }
                }
            }

        }

    }

</script>

<style scoped>
    /* body{
        margin-bottom: 10%;
    } */
    .user-input {
        width: 90%;
        height: 100%;
        border: 2px solid rgba(246, 255, 0, 0.86);
        border-radius: 5px;
        box-sizing: border-box;
        outline: none;
        text-indent: 10%;
        font-size: 150%;
        font-family: 楷体;
    }

    .user-btn {
        width: 60%;
        height: 90%;
        border: none;
        border-radius: 5px;
        background: rgba(251, 255, 0, 0.874);
        vertical-align: middle;
        outline: none;
        color: white;
        font-size: 160%;
        font-family: 楷体;
    }

    #search {
        display: flex;
        float: right;
        margin-top: 1%;
    }

    #know {

        display: flex;
        float: left;
        margin-top: 1%;
        margin-left: 3%;
        font-family: 楷体;
        color: pink;
        font-weight: bolder;

    }

    .about {
        display: flex;
        /* height: 2000px; */
        /* width: 100%; */
        /* border: solid black 3px; */
        flex-direction: column;
    }

    .content {
        display: flex;
        /* height: 2000px; */
        /* width: 100%; */
        /* border: solid black 3px; */
        flex-direction: column;
        /* margin-bottom: 5%; */
    }


    .content {
        /* border: solid red 3px; */
        border-radius: 50px;
        background-color: #ffffff;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 5%;
    }

    .title {
        display: flex;
        border: solid rgba(255, 192, 203, 0.14) 1px;
        height: 40px;
        text-align: center;
        vertical-align: middle;
        font-size: 35px;
        margin-top: 30px;
        justify-items: center;
        font-family: 华文新魏;
        color: rgba(249, 151, 167, 0.862);
        border-radius: 60px;
        background-color: rgba(255, 192, 203, 0.14);
        margin-left: 20%;
        margin-right: 20%;
        margin-bottom: 2%;
    }

    .literal {
        margin-left: 24%;
        justify-content: center;
        /* 标题宽度 */
        width: 10em;
        font-size: 1em;
        overflow: hidden;
        /* 不换行 */
        white-space: nowrap;
        /* 超出宽度用。。。 */
        text-overflow: ellipsis;
    }

    .literal:hover {
        text-overflow: inherit;
        /* 鼠标悬浮可见 */
        overflow: visible;
    }

    .title:hover {
        box-shadow: 0px 0px 20px #888888;
    }

    button {
        display: inline;
        outline: none;
        border: none;
        background-color: transparent;
        font-size: large;
        color: aquamarine;
        float: right;
        margin-left: 35%;

    }

    .more {
        text-decoration: none;
        color: rgba(255, 127, 221, 0.899);
    }
    @media screen and (max-width:768px){
            /* 手机屏幕 */
     .header{
             zoom:0.4;
            }
     .content{
        zoom:0.4;
         }
    }
   @media screen and (max-width:992px) and (min-width:768px){
            /* 平板 */

           
    }
</style>